<%@ page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>患者管理系统</title>
    <script src="js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.all.js"></script>


</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-sm12">
            <!--数据渲染表格-->
            <table id="patientTable" class="layui-table" lay-filter="patientTableFilter"></table>
        </div>
    </div>
</div>
</body>

<!--添加的 form 表格-->
<form class="layui-form" id="addForm" style="display: none;padding: 20px 50px 0 0" lay-filter="addFormFilter">

    <input type="hidden" name="guruId" class="layui-input" id="tag">

    <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-block">
            <input type="text" name="roleName" value="泼猴" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">权限管理</label>
        <div class="layui-input-block" id="test9"></div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit lay-filter="addSubmitFilter">提交</button>
            <button type="button" class="layui-btn" lay-submit lay-filter="addCancelFilter">取消</button>
        </div>
    </div>
</form>

<!-- 删除 修改的操作工具条-->
<script type="text/html" id="deleteOrUpdate">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
</script>

<!-- 添加、批量删除的操作工具条-->
<script type="text/html" id="andOrDeleteMulty">
    <a class="layui-btn" lay-event="add">添加</a>
    <a class="layui-btn  layui-btn-danger" lay-event="deleteMulty">批量删除</a>
</script>

<script type="text/javascript">
    layui.use(['table', 'form', 'layer', 'tree'], function () {

        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;
        var tree = layui.tree;
        //树形组件，test12节点不能操作(增删改)
        /*  tree.render({
              elem: '#test12'
              ,data: data
              ,showCheckbox: true  //是否显示复选框
              ,id: 'demoId1'
              ,isJump: true //是否允许点击节点时弹出新窗口跳转
              ,click: function(obj){
                  var data = obj.data;  //获取当前点击的节点数据
                  layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
              }
          });*/


        //节点可以操作

        $.ajax({
            url: '/cmfz/permission/getNodes',
            type: 'json',
            success: function (result) {
                tree.render({
                    elem: '#test9'
                    , data: result
                    , edit: ['add', 'update', 'del'] //操作节点的图标
                    , click: function (obj) {
                        layer.msg(JSON.stringify(obj.data));
                    }
                });
            }

        })

        table.render({
            elem: '#patientTable',
            url: '/cmfz/role/getAll',
            page: false,
            toolbar: '#andOrDeleteMulty',
            cols: [[
                {type: 'checkbox'},
                {title: '角色编号', field: 'roleId'},
                {title: '角色名称', field: 'roleName'},
                {title: '操作', toolbar: '#deleteOrUpdate'},
            ]]
        });

//==================添加绑定事件，打开弹出层 开始========================================
        table.on('toolbar(patientTableFilter)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event == 'add') {
                layer.open({
                    type: 1,
                    content: $("#addForm"),
                    area: ['400px', '400px'],
                    title: '添加'
                });
                form.render();
            }
        });
//==================添加绑定事件，打开弹出层 结束========================================


//===================修改&删除 事件绑定开始=========================================
        table.on('tool(patientTableFilter)', function (obj) {
            if (obj.event == "delete") {
                layer.confirm("确认要删除吗？", function (index) {
                    $.ajax({
                        url: '/cmfz/role/delByName',
                        data: "roleName=" + obj.data.roleName,
                        dataType: "json",
                        success: function (msg) {
                            if (msg) {
                                table.reload('patientTable');
                                layer.close(index);
                            } else layer.msg("删除异常")
                        }
                    });
                });
            } else if (obj.event == "update") {
                $.ajax({
                    url: '/cmfz/role/getOne',
                    data: 'roleName=' + obj.data.roleName,
                    success: function (result) {
                        form.val('addFormFilter', {
                            roleId: result.roleId,
                            roleName: result.roleName,
                        });
                    }
                })
                layer.open({
                    type: 1,
                    content: $("#addForm"),
                    area: ['400', '400px'],
                    title: '修改'
                });
            }
        })
//===================修改&删除 事件绑定结束===============================================


//===========================添加与修改功能============================================
        form.on('submit(addSubmitFilter)', function () {
            console.log(111111111)
            if ($("#tag").val() == '') {
                $.ajax({
                    url: '/cmfz/role/addOne',
                    data: $("#addForm").serialize(),
                    dataType: 'json',
                    async: true,
                    success: function (result) {
                        if (result) {
                            layer.closeAll();//添加成功关闭弹框
                            $("#addForm")[0].reset();  //清空输入框
                            table.reload('patientTable');
                        }
                    }
                });
            } else {
                $.ajax({
                    url: '/cmfz/role/update',
                    data: $("#addForm").serialize(),
                    dataType: 'json',
                    async: true,
                    success: function (result) {
                        if (result) {
                            layer.closeAll();//添加成功关闭弹框
                            $("#addForm")[0].reset();  //清空输入框
                            table.reload('patientTable');
                        }
                    }
                });
            }
            return false;//阻止表单提交
        })
    });


</script>
</html>